<template>
    <div class="header1">
        <div class="nav">
            <ul>
                <li>
                    <h6>Hi, 欢迎来到奖多多!</h6>
                </li>
                <li><a href="#">登录</a></li>
                <li><a href="#">免费注册</a></li>
                <li><a href="#">首页</a></li>
                <li>|</li>
                <li><a href="#">帮助</a></li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        name: "header1"
    }
</script>

<style scoped>

/*头部样式  */
.header1{
    background-color: #f7f7f7;
    font-size: 12px;
}

/*头部列表*/
.header1 .nav li{
    float: left;
    list-style-type: none;
    margin-left: 30px;
}

/*列表字体颜色*/
.header1 .nav li:nth-child(2),
.header1 .nav li:nth-child(3),
.header1 .nav li:nth-child(4),
.header1 .nav li:nth-child(5),
.header1 .nav li:nth-child(6){
    margin-top: 7px;
    color: #ccc;
}

/*链接样式*/
.nav a{
    color: #666;
}
.nav a:hover{
    text-decoration: none;
}
.nav li:nth-child(2) a{
    color: #e23a3a;
}
.nav li:nth-child(3){
    color: #999;
}
.nav li:nth-child(3):hover,
.nav li:nth-child(5):hover,
.nav li:nth-child(6):hover{
    color: #e23a3a;
}

/*列表左浮动*/
.nav ul li:nth-child(4),
.nav ul li:nth-child(5),
.nav ul li:nth-child(6){
    float: right;
}

</style>
